<template>
<el-card><div class="block">
     <el-row >
        <el-col >
          <el-date-picker
            v-model="pickDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 150px"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <el-button
            type="danger"
            icon="el-icon-search"
            circle
            @click="getListByDate()"
            style="margin-left: 30px"
          ></el-button>
        </el-col>
      </el-row>
      </div>
    <div class="class-table">
        <div class="table-wrapper">
            <div class="tabel-container">

                <table>
                    <thead>
                        <tr>
                            <th>时间</th>
                               <th v-for="(weekNum, weekIndex) in classTableData.courses.length" :key="weekIndex">
                               {{'周' + digital2Chinese(weekIndex, 'week')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">
                            <td>
                                <p>{{'第' + digital2Chinese(lessonIndex+1) + "节"}}</p>
                                <p class="period">{{ lesson }}</p>
                            </td>

                            <td v-for="(course, courseIndex) in classTableData.courses" :key="courseIndex">
                               <pre class="textFont">{{show(lessonIndex,courseIndex)}}</pre> 
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </el-card>
</template>

<script>

export default {
    data() {
        return {
          pickDate:'',
           pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
        ],
      },
           test:[{tname:'张蕊',cname:'java',place:'asdasd',time:0,week:0,startDate:'20220501',endDate:"20220530"},
                {tname:'郭立春',cname:'java',place:'anonkjn',time:5,week:3,startDate:'20220501',endDate:"20220530"},
                {tname:'马红',cname:'java',place:'etsdds',time:4,week:6,startDate:'20220501',endDate:"20220530"},
                {tname:'李东分',cname:'java',place:'btggrf',time:2,week:3,startDate:'20220501',endDate:"20220530"},],
            classTableData: {
                lessons: [
                    '08:00-08:45',
                    '08:50-09:35',
                    '10:00-10:45',
                    '10:50-11:35',
                    '13:00-13:45',
                    '13:50-14:35',
                    '15:00-16:45',
                    '16:50-17:35'
                ],
                courses: [
                    ['', '', '', '', '', '', '', ''],
                    ['', '', '', '', '', '', '', ''],
                    ['', '', '', '', '', '', '', ''],
                    ['', '', '', '', '', '', '', ''],
                    ['', '', '', '', '', '', '', ''],
                    ['', '', '', '', '', '', '', ''],
                    ['', '', '', '', '', '', '', ''],
                ]
            }

        };
    },
    created() {
            this.getTableData();
    },
    methods: {
      //按日期查找
      getListByDate(){

      },
         //请求后端数据
     getTableData(){
            // const {data:res} = await this.axios.get("findAll");
            // console.log(res);
            console.log(this.test);
            this.test.forEach(element => {
              console.log(element.time + "-" + element.week);
              console.log(this.classTableData.courses[0][0]);
              this.classTableData.courses[element.week][element.time] = element;
            });
          },

           //渲染到表格
          show(lessonIndex ,courseIndex){

            if(this.classTableData.courses[courseIndex][lessonIndex].tname!=null){ 
              console.log(lessonIndex);
              console.log(courseIndex);}
                   const  tname =  this.classTableData.courses[courseIndex][lessonIndex].tname
                   const  cname =  this.classTableData.courses[courseIndex][lessonIndex].cname 
                   const  place =  this.classTableData.courses[courseIndex][lessonIndex].place
                   var tname1 = tname+`\n`
                   var cname1 = cname+`\n`
                   const str = tname1 + cname1 + place
              
                    if(str.indexOf('undefined')!=-1){
                      return ''
                    }
                    return str 
                     
          },

        /**
        * 数字转中文
        * @param {Number} num 需要转换的数字
        * @param {String} identifier 标识符
        * @returns {String} 转换后的中文
        */
        digital2Chinese(num, identifier) {
            const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
            return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
        }
    }
};
</script>

<style  >

.elDatePicker.el-picker-panel {
  position: absolute;
  left: 0px;
  z-index: 2007;
  color: rgb(114, 46, 46);
  background: #002450;
  border: 1px solid #083f57;
  line-height: 30px;
}
.el-picker-panel .el-picker-panel__icon-btn {
  font-size: 20px;
  color: rgba(14, 3, 3, 0.979);
  border: 0;
  background: 0 0;
  cursor: pointer;
  outline: 0;
  margin-top: 8px;
}
.el-picker-panel__icon-btn.is-disabled {
  display: none;
}
.el-picker-panel .el-date-range-picker__header {
  height: 40px;
  line-height: 40px;
  background: #385874;
  border-top: 1px solid #425d7d;
  border-bottom: 1px solid #175bad;
  padding: 0 10px;
}
.el-picker-panel .el-date-range-picker__content {
  padding: 0;
}
.el-picker-panel .el-date-range-picker__header div {
  font-size: 20px;
}
.el-picker-panel .el-date-table th {
  font-size: 20px;
  color: rgb(0, 36, 243);
  border-bottom: 0;
}
.el-picker-panel .el-date-table td.prev-month {
  color: #6e6e6e;
}
.el-picker-panel .el-date-table td span {
  font-size: 20px;
}

.el-picker-panel .el-date-range-picker__content.is-left {
  border-right: 1px solid #1384b4;
  padding: 0;
}
.el-picker-panel .el-date-table.is-week-mode .el-date-table__row:hover div,
.el-picker-panel .el-date-table td.in-range div,
.el-picker-panel .el-date-table td.in-range div:hover {
  background-color: transparent;
  color: #f9f5c0;
}
.el-picker-panel .el-date-table td.start-date span {
  width: 28px;
  height: 26px;
  border-radius: 5px;
  color: #f9f5c0;
  border: 1px solid #fef551;
  background-color: #154c77;
}

.el-picker-panel .el-date-table td.end-date span {
  width: 28px;
  height: 26px;
  border-radius: 5px;
  color: #f9f5c0;
  border: 1px solid #fef551;
  background-color: #203a4e;
}

/* --------------------------------------------------- */








  .textFont{
    font-weight: bold;
  }
  .table-wrapper {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

  
    .tabel-container {
       
        margin: 7px;

        }
 table {
            table-layout: fixed;
            width: 100%;
         }
         
 thead {
                background-color: #67a1ff;
               
            }
 th {
                    color: #fff;
                    line-height: 17px;
                    font-weight: normal;
                }
tbody {
                background-color: #eaf2ff;
               
            }
 th,td {
                width: 60px;
                padding: 12px 2px;
                font-size: 12px;
                text-align: center;
            }
       td {
              color: #677998;
              line-height: 20px;
                }
                .period {
                    font-size: 8px;
                }
                  tr td:first-child {
                color: #333;
                
            }
</style>
